# Guía de Shortcodes - WarezDL Theme

Esta guía contiene todos los shortcodes disponibles en el tema y ejemplos de cómo usarlos.

---

## 📋 Tabla de Contenidos

1. [Acordeón](#acordeón)
2. [Tabs](#tabs)
3. [Código](#código)
4. [Tablas](#tablas)
5. [Quote / Citas](#quote--citas)
6. [Botones](#botones)
7. [Divisiones](#divisiones)
8. [Alertas](#alertas)
9. [Warning](#warning)
10. [Success](#success)
11. [Columnas](#columnas)
12. [Caja / Box](#caja--box)
13. [Lista con Iconos](#lista-con-iconos)

---

## Acordeón

Crea secciones expandibles/colapsables.

### Uso Básico

```
[acordeon title="¿Qué es WordPress?"]
WordPress es un sistema de gestión de contenidos (CMS) que permite crear y administrar sitios web de forma sencilla.
[/acordeon]
```

### Con Acordeón Abierto por Defecto

```
[acordeon title="Información Importante" open="true"]
Este acordeón estará abierto cuando se cargue la página.
[/acordeon]
```

### Múltiples Acordeones

```
[acordeon title="Requisitos del Sistema"]
- PHP 7.4 o superior
- MySQL 5.6 o superior
- WordPress 5.0 o superior
[/acordeon]

[acordeon title="Características"]
- Diseño responsive
- Modo oscuro/claro
- Optimizado para SEO
[/acordeon]

[acordeon title="Instalación"]
1. Descarga el tema
2. Sube a wp-content/themes
3. Activa desde el panel de WordPress
[/acordeon]
```

### Parámetros

- `title` - Título del acordeón (requerido)
- `open` - "true" o "false" para abrir por defecto (opcional, default: "false")

---

## Tabs

Crea pestañas para organizar contenido.

### Uso Básico

```
[tabs]
    [tab title="Descripción"]
    Este es el contenido de la primera pestaña con la descripción del producto.
    [/tab]
    
    [tab title="Especificaciones"]
    - Tamaño: 1920x1080
    - Formato: MP4
    - Duración: 2 horas
    [/tab]
    
    [tab title="Requisitos"]
    - Sistema operativo: Windows 10/11
    - RAM: 8GB mínimo
    - Espacio: 50GB
    [/tab]
[/tabs]
```

### Ejemplo Completo

```
[tabs]
    [tab title="Sinopsis"]
    Una historia épica sobre un samurái en el Japón feudal...
    [/tab]
    
    [tab title="Reparto"]
    - Actor Principal: Ken Watanabe
    - Director: Hiroshi Tanaka
    [/tab]
    
    [tab title="Información Técnica"]
    Año: 2024
    Duración: 142 minutos
    Idioma: Japonés con subtítulos
    [/tab]
    
    [tab title="Descargas"]
    [boton url="#" style="primary"]Descargar 1080p[/boton]
    [boton url="#" style="secondary"]Descargar 720p[/boton]
    [/tab]
[/tabs]
```

### Parámetros

- `title` - Título de cada pestaña (requerido)

---

## Código

Muestra bloques de código con resaltado de sintaxis y botón de copiar.

### Uso Básico

```
[codigo lang="html"]
<!DOCTYPE html>
<html>
<head>
    <title>Mi Página</title>
</head>
<body>
    <h1>Hola Mundo</h1>
</body>
</html>
[/codigo]
```

### Con Título

```
[codigo lang="php" title="functions.php"]
function mi_funcion() {
    echo "Hola desde WordPress";
}
add_action('init', 'mi_funcion');
[/codigo]
```

### Diferentes Lenguajes

```
[codigo lang="javascript" title="Script de validación"]
function validarEmail(email) {
    const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return regex.test(email);
}
[/codigo]

[codigo lang="css" title="Estilos personalizados"]
.mi-clase {
    color: #e50914;
    font-size: 16px;
    padding: 10px;
}
[/codigo]

[codigo lang="python" title="Script Python"]
def saludar(nombre):
    return f"Hola, {nombre}!"

print(saludar("Usuario"))
[/codigo]
```

### Parámetros

- `lang` - Lenguaje del código (html, css, javascript, php, python, etc.)
- `title` - Título opcional del bloque de código

---

## Tablas

Crea tablas con diferentes estilos.

### Tabla Básica

```
[tabla]
[fila]
    [th]Nombre[/th]
    [th]Tamaño[/th]
    [th]Formato[/th]
[/fila]
[fila]
    [td]Película 1[/td]
    [td]2.5 GB[/td]
    [td]MP4[/td]
[/fila]
[fila]
    [td]Película 2[/td]
    [td]1.8 GB[/td]
    [td]MKV[/td]
[/fila]
[/tabla]
```

### Tabla con Rayas (Striped)

```
[tabla style="striped"]
[fila]
    [th]Juego[/th]
    [th]Plataforma[/th]
    [th]Año[/th]
[/fila]
[fila]
    [td]The Last of Us[/td]
    [td]PlayStation[/td]
    [td]2013[/td]
[/fila]
[fila]
    [td]God of War[/td]
    [td]PlayStation[/td]
    [td]2018[/td]
[/fila]
[fila]
    [td]Zelda BOTW[/td]
    [td]Nintendo Switch[/td]
    [td]2017[/td]
[/fila]
[/tabla]
```

### Tabla con Bordes

```
[tabla style="bordered"]
[fila]
    [th]Característica[/th]
    [th]Básico[/th]
    [th]Premium[/th]
[/fila]
[fila]
    [td]Descargas[/td]
    [td]5/día[/td]
    [td]Ilimitadas[/td]
[/fila]
[fila]
    [td]Velocidad[/td]
    [td]Normal[/td]
    [td]Alta[/td]
[/fila]
[/tabla]
```

### Parámetros

- `style` - Estilo de la tabla: "default", "striped", "bordered"

---

## Quote / Citas

Muestra citas o textos destacados.

### Quote Básico

```
[quote]
La vida es como andar en bicicleta. Para mantener el equilibrio, debes seguir adelante.
[/quote]
```

### Quote con Autor

```
[quote author="Albert Einstein"]
La imaginación es más importante que el conocimiento.
[/quote]
```

### Diferentes Estilos

```
[quote style="default" author="Steve Jobs"]
La innovación distingue a un líder de un seguidor.
[/quote]

[quote style="border" author="Walt Disney"]
Si puedes soñarlo, puedes hacerlo.
[/quote]

[quote style="highlight" author="Nelson Mandela"]
La educación es el arma más poderosa que puedes usar para cambiar el mundo.
[/quote]
```

### Parámetros

- `author` - Nombre del autor de la cita (opcional)
- `style` - Estilo: "default", "border", "highlight"

---

## Botones

Crea botones con diferentes estilos y tamaños.

### Botones Básicos

```
[boton url="https://ejemplo.com" style="primary"]Descargar Ahora[/boton]

[boton url="#" style="secondary"]Más Información[/boton]

[boton url="#" style="success"]Completado[/boton]

[boton url="#" style="danger"]Eliminar[/boton]

[boton url="#" style="warning"]Advertencia[/boton]

[boton url="#" style="info"]Información[/boton]
```

### Diferentes Tamaños

```
[boton url="#" style="primary" size="small"]Botón Pequeño[/boton]

[boton url="#" style="primary" size="medium"]Botón Mediano[/boton]

[boton url="#" style="primary" size="large"]Botón Grande[/boton]
```

### Con Iconos

```
[boton url="#" style="primary" icon="⬇"]Descargar[/boton]

[boton url="#" style="success" icon="✓"]Confirmar[/boton]

[boton url="#" style="info" icon="ℹ"]Ayuda[/boton]
```

### Abrir en Nueva Pestaña

```
[boton url="https://ejemplo.com" style="primary" target="_blank"]Visitar Sitio[/boton]
```

### Parámetros

- `url` - URL del enlace (requerido)
- `style` - Estilo: "primary", "secondary", "success", "danger", "warning", "info"
- `size` - Tamaño: "small", "medium", "large"
- `target` - "_self" o "_blank"
- `icon` - Emoji o símbolo para mostrar antes del texto

---

## Divisiones

Crea líneas separadoras con diferentes estilos.

### Divisiones Básicas

```
[division]

[division style="dashed"]

[division style="dotted"]

[division style="gradient"]
```

### Con Altura y Margen Personalizados

```
[division height="3px" margin="3rem"]

[division style="gradient" height="4px" margin="4rem"]
```

### Parámetros

- `style` - Estilo: "solid", "dashed", "dotted", "gradient"
- `height` - Altura de la línea (ej: "2px", "3px")
- `margin` - Margen superior e inferior (ej: "2rem", "3rem")

---

## Alertas

Muestra mensajes de alerta con diferentes tipos.

### Alertas Básicas

```
[alerta type="info"]
Esta es una alerta informativa con información útil.
[/alerta]

[alerta type="success"]
¡Operación completada exitosamente!
[/alerta]

[alerta type="warning"]
Ten cuidado, esto requiere tu atención.
[/alerta]

[alerta type="danger"]
¡Error! Algo salió mal.
[/alerta]
```

### Sin Icono

```
[alerta type="info" icon="false"]
Alerta sin icono.
[/alerta]
```

### Alerta Descartable

```
[alerta type="success" dismissible="true"]
Esta alerta puede cerrarse haciendo clic en la X.
[/alerta]
```

### Parámetros

- `type` - Tipo: "info", "success", "warning", "danger"
- `icon` - "true" o "false" para mostrar/ocultar icono
- `dismissible` - "true" o "false" para permitir cerrar

---

## Warning

Atajo para crear una alerta de advertencia.

### Uso

```
[warning]
¡Atención! Asegúrate de hacer una copia de seguridad antes de continuar.
[/warning]
```

---

## Success

Atajo para crear una alerta de éxito.

### Uso

```
[success]
¡Perfecto! Tu descarga ha comenzado correctamente.
[/success]
```

---

## Columnas

Divide el contenido en columnas.

### Dos Columnas

```
[columnas count="2"]
    [columna]
    Contenido de la primera columna.
    [/columna]
    
    [columna]
    Contenido de la segunda columna.
    [/columna]
[/columnas]
```

### Tres Columnas

```
[columnas count="3"]
    [columna]
    Primera columna
    [/columna]
    
    [columna]
    Segunda columna
    [/columna]
    
    [columna]
    Tercera columna
    [/columna]
[/columnas]
```

### Con Espacio Personalizado

```
[columnas count="2" gap="3rem"]
    [columna]
    Columna con más espacio entre ellas.
    [/columna]
    
    [columna]
    Segunda columna.
    [/columna]
[/columnas]
```

### Parámetros

- `count` - Número de columnas (2, 3, 4, etc.)
- `gap` - Espacio entre columnas (ej: "2rem", "3rem")

---

## Caja / Box

Crea cajas de contenido con título e icono.

### Caja Básica

```
[caja title="Información Importante"]
Este es el contenido de la caja.
[/caja]
```

### Con Icono

```
[caja title="Descarga" icon="⬇"]
Haz clic en el botón para descargar el archivo.
[/caja]
```

### Diferentes Colores

```
[caja title="Caja por Defecto" color="default"]
Contenido de la caja.
[/caja]

[caja title="Caja Principal" color="primary" icon="★"]
Contenido destacado.
[/caja]

[caja title="Caja de Éxito" color="success" icon="✓"]
Operación completada.
[/caja]

[caja title="Caja de Advertencia" color="warning" icon="⚠"]
Ten precaución.
[/caja]

[caja title="Caja de Peligro" color="danger" icon="✕"]
Error crítico.
[/caja]
```

### Parámetros

- `title` - Título de la caja (opcional)
- `icon` - Emoji o símbolo (opcional)
- `color` - Color: "default", "primary", "success", "warning", "danger"

---

## Lista con Iconos

Crea listas con iconos personalizados.

### Lista Básica

```
[lista]
    [item]Primer elemento de la lista[/item]
    [item]Segundo elemento de la lista[/item]
    [item]Tercer elemento de la lista[/item]
[/lista]
```

### Con Icono Personalizado

```
[lista icon="★"]
    [item]Característica destacada 1[/item]
    [item]Característica destacada 2[/item]
    [item]Característica destacada 3[/item]
[/lista]
```

### Diferentes Colores

```
[lista icon="✓" color="success"]
    [item]Tarea completada 1[/item]
    [item]Tarea completada 2[/item]
[/lista]

[lista icon="⚠" color="warning"]
    [item]Advertencia 1[/item]
    [item]Advertencia 2[/item]
[/lista]

[lista icon="✕" color="danger"]
    [item]Error 1[/item]
    [item]Error 2[/item]
[/lista]
```

### Parámetros

- `icon` - Emoji o símbolo para cada elemento (default: "✓")
- `color` - Color: "primary", "success", "warning", "danger", "info"

---

## Ejemplos Combinados

### Ejemplo 1: Página de Descarga

```
[caja title="Información de la Descarga" color="primary" icon="⬇"]

[tabs]
    [tab title="Detalles"]
    [lista icon="✓" color="success"]
        [item]Tamaño: 2.5 GB[/item]
        [item]Formato: MP4[/item]
        [item]Calidad: 1080p[/item]
        [item]Audio: Dual (Español/Inglés)[/item]
    [/lista]
    [/tab]
    
    [tab title="Requisitos"]
    [lista icon="•" color="info"]
        [item]Sistema: Windows 10/11[/item]
        [item]RAM: 4GB mínimo[/item]
        [item]Espacio: 5GB libre[/item]
    [/lista]
    [/tab]
    
    [tab title="Descargar"]
    [boton url="#" style="primary" size="large" icon="⬇"]Descargar 1080p[/boton]
    [boton url="#" style="secondary" size="large" icon="⬇"]Descargar 720p[/boton]
    [/tab]
[/tabs]

[/caja]

[warning]
Asegúrate de tener un antivirus actualizado antes de descargar.
[/warning]
```

### Ejemplo 2: Guía de Instalación

```
[acordeon title="Paso 1: Descarga"]
Descarga el archivo desde el enlace proporcionado.
[boton url="#" style="primary"]Descargar[/boton]
[/acordeon]

[acordeon title="Paso 2: Extracción"]
Extrae el archivo ZIP en tu carpeta de preferencia.
[codigo lang="bash"]
unzip archivo.zip
[/codigo]
[/acordeon]

[acordeon title="Paso 3: Instalación"]
Ejecuta el instalador y sigue las instrucciones.
[success]
¡Instalación completada!
[/success]
[/acordeon]
```

### Ejemplo 3: Comparación de Planes

```
[columnas count="3" gap="2rem"]
    [columna]
    [caja title="Plan Básico" color="default"]
    [lista icon="✓"]
        [item]5 descargas/día[/item]
        [item]Velocidad normal[/item]
        [item]Soporte por email[/item]
    [/lista]
    [boton url="#" style="secondary"]Gratis[/boton]
    [/caja]
    [/columna]
    
    [columna]
    [caja title="Plan Pro" color="primary"]
    [lista icon="★" color="success"]
        [item]Descargas ilimitadas[/item]
        [item]Velocidad máxima[/item]
        [item]Soporte prioritario[/item]
    [/lista]
    [boton url="#" style="primary"]$9.99/mes[/boton]
    [/caja]
    [/columna]
    
    [columna]
    [caja title="Plan Premium" color="success"]
    [lista icon="★" color="success"]
        [item]Todo de Pro +[/item]
        [item]Acceso anticipado[/item]
        [item]Sin publicidad[/item]
    [/lista]
    [boton url="#" style="success"]$19.99/mes[/boton]
    [/caja]
    [/columna]
[/columnas]
```

---

## Notas Importantes

1. **Anidación**: Puedes anidar shortcodes dentro de otros (ej: botones dentro de cajas)
2. **Responsive**: Todos los shortcodes son responsive y se adaptan a móviles
3. **Modo Oscuro**: Los estilos se adaptan automáticamente al modo oscuro/claro del tema
4. **Personalización**: Los colores y estilos usan las variables CSS del tema

---

## Soporte

Si tienes problemas con algún shortcode, verifica:
- Que los shortcodes de apertura y cierre coincidan
- Que los parámetros estén escritos correctamente
- Que no haya espacios extra en los nombres de los shortcodes
